<template>
  <div class="search">
    <!-- 搜索框 -->
    <div class="searchBox w-100 box-sizing">
      <div class="innerSearchBox w-100 box-sizing d-flex ai-center">
        <div class="searchIcon"></div>
        <input
          type="text"
          placeholder="搜索歌曲、歌手、专辑"
          v-model="searchContent"
          class="h-100 box-sizing"
        />
        <div class="cancelIcon" @click="handeCancelInput" v-if="searchContent"></div>
      </div>
    </div>

    <!-- 第一个页面,显示热门搜索 -->
    <div class="bottomArea w-100 box-sizing" v-if="!searchContent">
    <!-- <div class="bottomArea w-100 box-sizing"> -->
      <div class="hotSearchTitle w-100">热门搜索</div>
      <div class="list">
        <div
          class="labelBox"
          v-for="(item,index) in hots"
          @click="chooseResultItem(item.first)"
          :key="index"
        >{{item.first}}</div>
      </div>
      <div class="searchHistory w-100">
        <div
          class="searchItem"
          @click="chooseResultItem(item)"
          v-for="(item,index) in searchHistory"
          :key="index"
        >
          <div class="historyIcon"></div>
          <div class="historyText h-100">{{item}}</div>
          <div class="outerCancel" @click.stop="deleteHistoryItem(index)">
            <div class="historyCancel"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二个页面,显示搜索提示 -->
    <div class="searchArea w-100" v-if="searchContent&&!musicList.length">
    <!-- <div class="searchArea w-100"> -->
      <div class="blueText" @click="chooseResultItem(searchContent)">搜索{{'“'+searchContent+'”'}}</div>
      <div
        class="resultItem"
        @click="chooseResultItem(item.keyword)"
        v-for="(item,index) in searchResult"
        :key="index"
      >
        <div class="searchIcon"></div>
        <div class="searchText">{{item.keyword}}</div>
      </div>
    </div>

    <!-- 第三个页面,显示歌曲列表 -->
    <div class="searchSongs w-100" v-if="musicList.length">
    <!-- <div class="searchSongs w-100"> -->
      <songs :musicList="musicList" />
    </div>
  </div>
</template>
 
<script>
import {
  getSearchHot,
  getSearchSuggest,
  getSearchKeywords
} from "@/api/search";
import songs from "@/components/admin/adminList/songs";
export default {
  name: "vueName",
  data() {
    return {
      hots: [],
      searchContent: "",
      searchResult: [],
      searchHistory: [],
      showSongs: false,
      musicList: []
    };
  },
  components: {
    songs
  },
  watch: {
    async searchContent(newV) {
      if (newV) {
        const res = await getSearchSuggest(newV);
        this.searchResult = res.data.result.allMatch;
      } else {
        this.musicList = [];
      }
    }
  },
  async created() {
    //热门搜索调用的数据
    const res = await getSearchHot();
    this.hots = res.data.result.hots;

    let history = this.getLocalStorageArray("searchHistory");
    this.searchHistory = history;
  },
  methods: {
    deleteHistoryItem(index) {
      let history = this.getLocalStorageArray("searchHistory");
      history.forEach((item1, index1) => {
        if (index == index1) {
          history.splice(index, 1);//删除历史记录
        }
      });
      this.setLocalStorageArray("searchHistory", history);
      this.searchHistory = history;
    },
    handeCancelInput() {
      this.searchContent = "";
    },
    //公共点击item方法
    async chooseResultItem(keyword) {
      //把传来的文字放到输入框中
      this.searchContent = keyword;

      //存历史输入记录
      let history = this.getLocalStorageArray("searchHistory"); //取值1临时用存起来(LocalStorag只能取和存)
      history.push(keyword); //添加到历史2
      this.setLocalStorageArray("searchHistory", history); //存到历史里面3 123覆盖历史记录也就是取出 重新赋值 在存储(取别名)
      history = this.getLocalStorageArray("searchHistory"); //取出去重的值
      this.searchHistory = history;

      //调用歌曲列表接口获取数据
      const res = await getSearchKeywords(keyword);
      res.data.result.songs.forEach((item, index) => {
        this.musicList.push({
          title: item.name,
          dsc: item.album.name,
          //   al: item.alia[0],
          id: item.id,
          picUrl: item.album.artist.img1v1Url
        });
        let authors = [];
        item.artists.forEach((item1, index1) => {
          authors.push(item1.name);
        });
        this.musicList[index].authors = authors.join("/");
      });
    },
    getLocalStorageArray(key) {
      //localStorage[key]key是个形参 以后封装函数如果传的参数是对象的属性 那么不能用.key 得用[key]
      let history = localStorage[key] ? JSON.parse(localStorage[key]) : []; //取 json-js
      if (!(history instanceof Array)) {
        //(判断是不是数组)保证取出来是数组
        history = [];
      }
      return history;
    },
    setLocalStorageArray(key, value) {
      if (value instanceof Array) {
        value = Array.from(new Set(value)); //去重es6数组去重
      }
      localStorage[key] = JSON.stringify(value); //存js对象-json
    }
  }
};
</script>

<style scoped lang = "scss">
.search {
  .searchBox {
    padding: 15px 10px;
    /* height: 60px; */
    .innerSearchBox {
      height: 30px;
      background-color: #ebecec;
      border-radius: 30px;
      .searchIcon {
        background-image: url("~assets/img/searchIcon.png");
        background-size: contain;
        width: 16px;
        height: 16px;
        margin: 0 8px;
      }
      > input {
        display: inline-block;
        flex: 1;
        border: none;
        outline: none;
        background-color: #ebecec;
        /* background-color: red; */
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
      }
      > input::-webkit-input-placeholder {
        color: #c9c9c9;
        /* 字体大小直接写样式即可 */
      }
      /*  Mozilla Firefox 4-18使用伪类 */
      > input:-moz-placeholder {
        color: #c9c9c9;
      }
      /* Mozilla Firefox 19+ 使用伪元素  */
      > input::-moz-placeholder {
        color: #c9c9c9;
      }
      /* IE10使用伪类 */
      > input:-ms-input-placeholder {
        color: #c9c9c9;
      }
      .cancelIcon {
        background-image: url("~assets/img/cancelIcon.png");
        background-size: contain;
        width: 16px;
        height: 16px;
        margin: 0 8px;
      }
    }
  }
  .bottomArea {
    padding: 12px 10px 0;
    .hotSearchTitle {
      color: #666;
    }
    .list {
      margin: 10px 0 7px;
      .labelBox {
        margin: 0 8px 8px 0;
        padding: 0 14px;
        line-height: 32px;
        color: #333;
        font-size: 14px;
        height: 32px;
        border-radius: 60px;
        border: 1px solid #ededed;
        display: inline-block;
      }
    }
    .searchHistory {
      .searchItem {
        display: flex;
        align-items: center;
        height: 45px;
        .historyIcon {
          background-image: url("~assets/img/historyIcon.png");
          background-size: contain;
          width: 20px;
          height: 20px;
          margin: 0 10px;
        }
        .historyText {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 45px;
          font-size: 14px;
        }
        .outerCancel {
          width: 45px;
          height: 45px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .historyCancel {
            background-image: url("~assets/img/cancelIcon1.png");
            background-size: contain;
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .searchArea {
    .blueText {
      box-sizing: border-box;
      height: 50px;
      margin-left: 10px;
      padding-right: 10px;
      font-size: 15px;
      line-height: 50px;
      color: #507daf;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      border-bottom: rgba(0, 0, 0, 0.1) solid 1px;
    }
    .resultItem {
      padding: 0 10px;
      box-sizing: border-box;
      height: 45px;
      display: flex;
      align-items: center;
      .searchIcon {
        background-image: url("~assets/img/searchIcon.png");
        background-size: contain;
        width: 19px;
        height: 19px;
        margin-right: 8px;
      }
      .searchText {
        flex: 1;
        height: 100%;
        line-height: 45px;
        font-size: 15px;
        color: #333;
      }
    }
  }
}
</style>